<template>
  <div class="col-sm-12">
    <div class="br_line" style="margin-bottom:30px"></div>
    <div style="text-align: right;margin-bottom:10px;margin-right:8%">
      <!--文件恢复  完成-->
      <el-popover placement="bottom" width="240" v-model="visible_1">
      <p>把文件恢复到原本路径下？</p>
        <div style="text-align: right; margin: 0">
          <el-button
            size="mini"
            type="text"
            @click="
              visible_1 = false;
              recive_url = '';
              recive_path = '';
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="
              visible_1 = false;
              restoreFiles(check_val);
            "
            >确定</el-button
          >
        </div>
        <el-button
          type="primary"
          slot="reference"
          @click=""
          style="margin-right:1%"
          >恢复文件</el-button
        >
      </el-popover>

      <!--彻底删除  完成-->
      <el-popover placement="bottom" width="240" v-model="visible_2">
        <p>确定彻底删除文件？</p>
        <div style="text-align: right; margin: 0">
          <el-button
            size="mini"
            type="text"
            @click="
              visible_2 = false;
              recive_url = '';
              recive_path = '';
            "
            >取消</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="
              visible_2 = false;
              deleteComplete(check_val);
            "
            >确定</el-button
          >
        </div>
        <el-button
          type="danger"
          slot="reference"
          @click=""
          style="margin-right:1%"
          >彻底删除</el-button
        >
      </el-popover>
    </div>

    <div class="card-box">
      <table class="table">
        <thead>
          <tr>
            <th style="width:20px"></th>
            <th style="width:30px"></th>
            <th style="width:42%">文件名</th>
            <th>作者</th>
            <th>原路径</th>
            <th>删除时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index" ref="table">
            <!--勾选框   勾选参数功能待开发-->
            <input
              type="checkbox"
              style="margin-top:15px"
              :value="item.fileId"
              v-model="check_val"
            />

            <td v-if="check_suffix(item.fileType) == 'text'">
              <i class="el-icon-notebook-2" style="margin-top:7px"></i>
            </td>
            <td v-if="check_suffix(item.fileType) == 'photo'">
              <i class="el-icon-picture-outline" style="margin-top:7px"></i>
            </td>
            <td v-if="check_suffix(item.fileType) == 'video'">
              <i class="el-icon-video-camera" style="margin-top:7px"></i>
            </td>
            <td v-if="check_suffix(item.fileType) == 'folder'">
              <i class="el-icon-folder" style="margin-top:7px"></i>
            </td>
            <td v-if="check_suffix(item.fileType) == ''">
              <i class="el-icon-document-remove" style="margin-top:7px"></i>
            </td>

            <td class="middle-align">
              <a>{{ item.fileName }}</a>
            </td>
            <td>{{ item.author }}</td>
            <td>{{ item.path }}</td>
            <td>{{ item.lastTime }}</td>
          </tr>
        </tbody>
      </table>
        <div class="block" align="center" >
            <el-pagination
                :page-size="10"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :total="parseInt(this.total)"
                layout="prev, pager, next"
                >
            </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      check_val: [],
      visible_1: false,
      visible_2: false,
      currentPage:1,
    };
  },
  methods: {
    // 点击页面数显示
    handleCurrentChange: function(currentPage) {
        this.$parent.getData(this.path,currentPage);
      },
    open_success(mes) {
      this.$notify.success({
        title: "成功",
        message: mes,
        position: "bottom-right"
      });
    },
    open_error(mes) {
      this.$notify.error({
        title: "错误",
        message: mes,
        position: "bottom-right"
      });
    },

    check_suffix(suffix) {
      if (suffix == "txt") {
        return "text";
      } else if (
        suffix == "png" ||
        suffix == "jpg" ||
        suffix == "jpeg" ||
        suffix == "gif"
      ) {
        return "photo";
      } else if (suffix == "mp4") {
        return "video";
      } else if (suffix == "folder") {
        return "folder";
      } else {
        return "";
      }
    },

    // 恢复文件  完成
    restoreFiles(fileIds){
        var formData=new FormData();
        formData.append('fileIds',fileIds);
        
        this.$axios.put('/api/taoyun/v1/restore-recycle-bin',formData)
        .then(res => {
          if (res.data.code == "200") {
            this.open_success(res.data.msg + "，页面将在2S后自动刷新");
            setTimeout(function() {
              location.reload();
            }, 2000);
          } else if (res.data.code == "500") {
            this.open_error(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 彻底删除   完成
    deleteComplete(fileIds){
        var Ids='';
        for(let i=0;i<fileIds.length;i++){
            if(i!=fileIds.length-1){
                Ids+=fileIds[i]+',';
            }
            else{
                Ids+=fileIds[i];
            }
        }

        this.$axios.delete('/api/taoyun/v1/delete-from-recycle-bin', {
           params: {
               fileIds:Ids,
           }
        })
        .then(res => {
          if (res.data.code == "200") {
            this.open_success(res.data.msg + "，页面将在2S后自动刷新");
            setTimeout(function() {
              location.reload();
            }, 2000);
          } else if (res.data.code == "500") {
            this.open_error(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }

  },
  props: ["data","total"]
};
</script>
<style scoped>
.br_line {
  /*内嵌水平线*/
  width: 90%;
  margin: 0 auto;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
</style>
